<!--
@description ：撤回记录
-->

<template>
  <div class="app-container">
    <el-card>
      <div style="display: flex;justify-content: space-between;align-items: center">
        <h3 style="display: inline-block">撤回记录</h3>
        <el-button plain type="info" @click="goback">返回</el-button>
      </div>
    </el-card>
    <el-card style="margin-top: 20px;">
      <NormalForm :enumOpt="enumOpt" :formList="formList" :isShowCard="false" :operateForm="queryForm"
                  pageTitle=""
                  @handleQuery="handleQuery" @handleReset="handleReset"></NormalForm>
    </el-card>
    <el-card class="mt20">
      <el-table v-loading="loading" :data="tableList" max-height="560" min-height="420"
                style="width: 100%;margin-top: 12px">
        <el-table-column :show-overflow-tooltip="true" align="center" label="触发员工" min-width="140"
                         prop="weUserName"></el-table-column>
        <el-table-column :show-overflow-tooltip="true" align="center" label="聊天客户" min-width="140"
                         prop="wechatNickname">
        </el-table-column>
        <el-table-column :show-overflow-tooltip="true" align="center" label="发送原文" min-width="200"
                         prop="content"></el-table-column>
        <el-table-column :show-overflow-tooltip="false" align="center" label="触发敏感词" min-width="160"
                         prop="sensitiveWord">
        </el-table-column>
        <el-table-column :show-overflow-tooltip="false" align="center" label="触发时间" min-width="170"
                         prop="triggerTime"></el-table-column>
        <el-table-column :show-overflow-tooltip="false" align="center" label="是否撤回成功" min-width="150"
                         prop="isSuccess">
          <template slot-scope="scope">
                  <span :style="scope.row.isSuccess == '0' ? 'color:#14D595' : 'color: #082AFF'">{{
                      scope.row.isSuccessName
                    }}</span>
          </template>
        </el-table-column>
      </el-table>
      <NormalPagination :currentPage="queryForm.pageNum" :pageSize="queryForm.pageSize" :total="total"
                        @handleCurrentChange="handleCurrentChange"
                        @handleSizeChange="handlePageSizeChange"></NormalPagination>
    </el-card>
  </div>
</template>
<script>

import * as api from "@/api/organization";

export default {
  name: "", //页面名称，必填
  props: {},
  components: {},
  data() {
    return {
      queryForm: {
        weUserIdList: [],
        dateRange: [],
        isSuccess: '',
        pageNum: 1,
        pageSize: 10,
      },
      formList: [
        {
          label: '触发员工',
          value: [],
          prop: 'weUserIdList',
          type: 'SELECT',
          emunName: 'weUserIdList',
          multiple: true,
          defaultNoLabel: true,
        },
        {
          label: '',
          value: [],
          prop: 'dateRange',
          type: 'DATE_RANGE',
          formate: 'yyyy-MM-dd',
          emunName: ''
        },
        {
          label: '是否撤回成功',
          value: '',
          prop: 'isSuccess',
          type: 'SELECT',
          emunName: 'isSuccessList',
          defaultNoLabel: true,
        },
      ], // 查询框
      enumOpt: {
        weUserIdList: [],
        isSuccessList: [
          {dictValue: '0', dictLabel: '成功'},
          {dictValue: '1', dictLabel: '失败'},
        ],
      },
      loading: false,
      tableList: [{}],
      total: 0,
    }
  },
  watch: {},
  methods: {
    handleQuery() {
      this.queryForm.pageNum = 1
      this.getListFn()
    },
    handleReset() {
      this.queryForm = {
        weUserIdList: [],
        dateRange: [],
        startTime: '',
        endTime: '',
        isSuccess: '',
        pageNum: 1,
        pageSize: 10,
      }
      this.getListFn()
    },
    getListFn() {

    },
    handleCurrentChange(val) {
      this.queryForm.pageNum = val
      this.getListFn()
    },
    handlePageSizeChange(val) {
      this.queryForm.pageNum = 1
      this.queryForm.pageSize = val
      this.getListFn()
    },
    goback() {
      this.$router.go(-1)
    },
  },
  mounted() {
    api.getList({
      name: '',
      department: '',
      pageNum: 1,
      pageSize: 99999,
      isActivate: '',
    })
      .then(({rows}) => {
        const data = rows.map(item => {
          return {
            dictLabel: item.name,
            dictValue: item.userId,
          }
        })
        this.enumOpt.weUserIdList = JSON.parse(JSON.stringify(data))
      })
  },
  created() {
  },
}

</script>

<style lang="scss" scoped>

.app-container {
  height: 100%;
}

.header-search {
  display: flex;
  align-items: center;
}
</style>
